<div class="panel panel-default">
  <div class="panel-heading">
    Posts
    <span class="pull-right btn-group">
      <a href="" class="btn btn-xs btn-success" ui-sref="^.add()">
        <i class="fa fa-plus"></i>
      </a>
    </span>
  </div>

  <div class='list-group'>

    <div ng-repeat="item in ctrl.posts" class="list-group-item">
     <span class="pull-right btn-group">
      <a href="" class="btn btn-xs btn-default" ui-sref="^.edit({id: item.id})">
        <i class="fa fa-pencil"></i>
      </a>
      <a href="" class="btn btn-xs btn-danger" ui-sref="^.delete({id: item.id})">
        <i class="fa fa-trash-o"></i>
      </a>
    </span>
      <h4 class="list-group-item-heading">
        <a href="" ui-sref="^.view({id: item.id})">{{item.title}}</a>
        <br/>
        <small>
          Created:
          {{item.created | date:'medium'}}
            <span ng-if="item.created !== item.modified">
              &middot; modified:
              {{item.modified | date:'medium'}}
            </span>
        </small>
      </h4>

      <div class="box-body">
        <div class="row">
          <div class="col-sm-10" style="white-space: pre;">{{item.content}}</div>
          <div class="col-sm-2">
            <img ng-if="item.image" ng-src="{{item.image}}?id={{item.id}}"/>
          </div>
        </div>
      </div>

    </div>

    <div ng-show="!ctrl.posts.length" class="list-group-item">
      <h4 class="list-group-item-heading" translate>
        There are no posts
      </h4>

      <p class="list-group-item-text" translate>Click <a href="" ui-sref="^.add">here</a> to add a post!</p>
    </div>
  </div>

</div>

